<template>
	<view :class="config.style">
		<FullscreenLoading :loading="loading"></FullscreenLoading>
		<view class="products-section" v-if="!loading">
			<view class="cover">
				<image mode="widthFix" :src="ordersInfo.products.cover_400" @error="imageError" class="image"></image>
			</view>
			<view class="info">
				<view class="title text-ellipsis-2">{{ordersInfo.products.title}}</view>
				<view class="description text-ellipsis">{{ordersInfo.products.description}}</view>
				<view class="price">
					<text class="price-title">价格：</text>
					<text>￥ {{ordersInfo.products.price}}</text>	
				</view>
				<view class="sku" v-if="ordersInfo.products.sku">
					<text class="price-title">规格：</text>
					<text>{{ordersInfo.products.sku}}</text>	
				</view>
			</view>
		</view>
		
		<view class="evaluate-section">
			<form @submit="formSubmit" @reset="formReset">
				<view>
					<Star v-if="!loading" :star="star" @submitStar="submitStar" />
				</view>
				<view v-if="!loading">
					<imgUpload :count="5" @submitImgs="submitImgs" :images="images"></imgUpload>
				</view>
				<view class="uni-title title">评价内容</view>
				<view class="uni-textarea textarea">
					<textarea name="content" placeholder-style="color:#666" show-confirm-bar="false" placeholder="请填写评价内容." v-model="content" />
				</view>
				<view class="submit">
					<button class="button" hover-class="button-hover" type="default" maxlength="120" form-type="submit">确认提交</button>
				</view>
			</form>
		</view>
		
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	//全屏加载中
	import FullscreenLoading from '../../../components/muu-fullscreen-loading/muu-fullscreen-loading.vue'
	import ImgUpload from '../common/imgUpload.vue'
	import Star from './star.vue' //底部评论收藏点赞栏
	export default {
		components: {
			FullscreenLoading,
			ImgUpload,
			Star
		},
		data() {
			return {
				loading: true, //加载中
				urlParams: {}, //url传递过来的参数
				ordersInfo: {}, //订单数据
				/***********************/
				url: '',
				header: {
					'content-type': 'multipart/form-data'
				},
				/***********************/
				star: [ //评分组件数组
					{name:'评分',total:5,value:5,ban:true,sum:0},
				], 
				/***********************/
				content: '',//评价内容
				value: 5, //默认评分
				images: [], //评价图片
			}
		},
		onLoad(option) {
			//获取url参数
			this.getUrlParam()
			Promise.all([this.getOrdersDetail(),this.getEvaluateDetail()]).then(res => {
				//加载完成
				this.loading = false
			})
		},
		created() {
			
		},
		computed: {
			...mapState(['config'])
		},
		methods: {
			
			//获取url参数
			getUrlParam: function(){
				// #ifdef MP-WEIXIN
				//console.log('小程序端执行')
				let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let curRoute = routes[routes.length - 1].route //获取当前页面路由
				let curParam = routes[routes.length - 1].options; //获取路由参数
				// #endif
			
				// #ifdef H5
				let curParam = this.$route.query;
				// #endif
				this.urlParams = curParam
				//console.log(curParam)
				this.getOrdersDetail()
				this.getEvaluateDetail()
			},
			/**
			 * 获取订单详情
			 */
			getOrdersDetail: function(){
				let that = this
				let data = {}
					data.action = 'detail'
					data.order_no = this.urlParams.order_no
				//获取首页数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/orders'
					//#endif
					//#ifdef H5
					url = 'entry/site/orders'
					//#endif
				return new Promise((resolve, reject) => {
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.ordersInfo = res.data.data
							}
							resolve(res.data)
						}
					})
				})
			},
			
			/**
			 * 获取评价详情
			 */
			getEvaluateDetail: function(){
				let that = this
				let data = {}
					data.action = 'detail'
					data.order_no = this.urlParams.order_no
				//获取首页数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/evaluate'
					//#endif
					//#ifdef H5
					url = 'entry/site/evaluate'
					//#endif
				return new Promise((resolve, reject) => {
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								console.log(res.data.data)
								if(res.data.data !== false){
									that.star[0].value = res.data.data.value
									that.value = res.data.data.value
									if(parseInt(that.star[0].value) < parseFloat(that.star[0].value)){
										that.star[0].ban = true
									}
									//设置评价内容
									that.content = res.data.data.content
									//设置初始图片列表
									that.images = res.data.data.images
								}
								//console.log(res.data.data.images)
							}else{
								//没有数据不在处理
							}
							resolve(res.data)
							that.loading = false
						}
					})
				})
				
			},
			
			/**
			 * 评价图片组
			 * @param {Object} data
			 */
			submitImgs: function(data) {
				//console.log(data, "获取到的图片组" + data.length + "张")
				//处理图片数组
				let images = new Array()
				data.map(item=>{
					images.push(item.image)
				})
				//console.log(images)
				this.images = images
				console.log(this.images,'已上传的图片组')
			},
			
			/**
			 * 评分值获取
			 * @param {Object} data
			 */
			submitStar: function(data){
				//console.log(data, "获取评分")
				this.value = data[0]['value']
				console.log(this.value,'已设置的评分值')
			},
			
			/**
			 * 提交评价表单
			 * @param {Object} e
			 */
			formSubmit: function(e){
				let that = this
				let content = this.content
				//提交数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/evaluate'
					//#endif
					//#ifdef H5
					url = 'entry/site/evaluate'
					//#endif
				this.util.request({
					url : url,
					data: {
						'action': 'edit',
						'order_no': that.urlParams.order_no,
						'type': 'goods',
						'type_id': that.ordersInfo.products.id,
						'content': that.content,
						'value': that.value,
						'images': that.images,
					},
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: function (res) {
						//console.log(res.data);
						if (res.data.code == 200) {
							uni.showModal({
								title: '温馨提示',
								content: res.data.msg,
								success: ()=> {
									uni.navigateBack()
								}
							})
						}else{
							uni.showToast({
							    title: res.data.msg,
							    duration: 2000,
								icon: 'none'
							});
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	/*订单商品信息*/
	.products-section {
		display: flex;
		padding: 20rpx;
		.cover {
			width: 280rpx;
			overflow: hidden;
			.image {
				border-radius: 10rpx;
				width: 100%;
				height: auto;
				display: block;
			}
		}
		.info {
			flex: 1;
			padding: 0 0 0 20rpx;
			.title {
				font-size: 28rpx;
				color: #000;
				font-weight: 600;
				height: 72rpx;
				line-height: 36rpx;
			}
			.description {
				color: #999;
				font-size: 24rpx;
			}
			.price {
				margin-top: 20rpx;
				font-size: 28rpx;
			}
			.sku {
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #999;
			}
			.exp-info {
				margin-top: 10rpx;
				color: #999;
				font-size: 24rpx;
				.item {
					display: inline;
					margin: 0;
					.num {
						margin: 0 10rpx;
					}
				}
			}
		}
	}
	
	.evaluate-section {
		padding: 20rpx;
		.title {
			font-size: 28rpx;
			line-height: 96rpx;
			font-weight: 700;
		}
		.textarea {
			
			border-radius: 10rpx;
			background-color: #f8f8f8;
			padding: 16rpx;
			font-size: 28rpx;
			margin-bottom: 20rpx;
			textarea {
				width: 100%;
			}

		}
		.submit {
			position: fixed;
			bottom: 20rpx;
			left: 20rpx;
			right: 20rpx;
			.button {
				display: block;
				color: #fff;
			}
			.button-hover {
				color: #fff;
			}
		}
	}
	
	/*页面风格设计*/
	.Blue {
		.price {
			color: $Blue;
		}
		.submit {
			.button {
				background-color: $Blue;
			}
			.button-hover {
				background-color: $Blue-hover;
			}
		}
	}
	.Green {
		.price {
			color: $Green;
		}
		.submit {
			.button {
				background-color: $Green;
			}
			.button-hover {
				background-color: $Green-hover;
			}
		}
	}
	.LightRed {
		.price {
			color: $LightRed;
		}
		.submit {
			.button {
				background-color: $LightRed;
			}
			.button-hover {
				background-color: $LightRed-hover;
			}
		}
	}
	.Orange {
		.price {
			color: $Orange;
		}
		.submit {
			.button {
				background-color: $Orange;
			}
			.button-hover {
				background-color: $Orange-hover;
			}
		}
	}
	.LightPink {
		.price {
			color: $LightPink;
		}
		.submit {
			.button {
				background-color: $LightPink;
			}
			.button-hover {
				background-color: $LightPink-hover;
			}
		}
	}
	.Magenta {
		.price {
			color: $Magenta;
		}
		.submit {
			.button {
				background-color: $Magenta;
			}
			.button-hover {
				background-color: $Magenta-hover;
			}
		}
	}
</style>
